<template>
  <view class="form">
    <view class="title">
      <h1>标题</h1>
      <input type="text" placeholder="写一写标题吧" v-model="opinion.title" maxlength="50">
    </view>
    <view class="title">
      <h2>建议</h2>
      <u--textarea v-model="opinion.article" placeholder="说一说你想到的意见和建议" count maxlength=500 height="200px">
      </u--textarea>
    </view>
    <u-button type="primary" text="提交" @click="submit"></u-button>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
  export default {
    data() {
      return {
        opinion: {
          title: '',
          article: '',
          time: '',
          userName: ''
        }
      }
    },
    methods: {
      // 获取当前时间
      getTimer() {
        let time = new Date()
        time = uni.$u.timeFormat(time, 'yyyy-mm-dd')
        this.opinion.time = time
      },
      // 点击了提交按钮
      submit() {
        if (this.opinion.title || this.opinion.article) {
          this.getTimer()
          this.opinion.userName = this.$store.state.userName
          uniCloud.callFunction({
            name: "opinion",
            data: {
              opinion: this.opinion
            },
            success: (res) => {
              this.$refs.uToast.success('提交成功')
              uni.navigateBack()
            },
            fail: () => {
              this.$refs.uToast.error('提交失败了')
            }
          })
        } else {
          this.$refs.uToast.error("信息填写不正确")
        }
      }
    }
  }
</script>

<style lang="scss">
  .form {
    box-sizing: border-box;
    margin: 20px;
    width: 670rpx;
    height: 590px;
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 15px;
    background-color: #fff;
    box-shadow: 0px 0px 10px #ccc;

    h1 {
      float: left;
      text-align: center;
      color: #09f;
      font-size: 18px;
      margin-top: 5px;
      margin-right: 10px;
    }
  }

  .title {
    margin: 20px 0;

    input {
      // border-bottom: 1px solid #ccc;
      // border-radius: 10px;
      padding: 5px 10px;
    }

    h2 {
      text-align: center;
      color: #09f;
      font-size: 18px;
      margin-top: 5px;
      margin-right: 10px;
    }
  }
</style>
